<template>
  <el-table-column
    v-if="isShow"
    :prop="columnData.prop"
    :label="columnData.name"
    :align="columnData.align ? columnData.align : 'center'"
    show-overflow-tooltip
    :width="columnData.width ? columnData.width : null"
  >
    <template slot-scope="scope">
      <!-- 多选类型类字段显示 -->
      <template v-if="columnData.multiselect && columnData.type == 'select'">
        {{ multiselectData(scope.row) }}
      </template>
      <!-- 类型类字段显示 -->
      <template v-if="!columnData.multiselect && columnData.type == 'select'">
        <div v-for="(itemC, indexC) of columnData.options" :key="indexC">
          <span v-if="itemC.value == scope.row[columnData.prop]">{{
            itemC.label
          }}</span>
        </div>
      </template>
      <!-- html -->
      <template v-if="columnData.type == 'html'">
        <div v-html="scope.row[columnData.prop]"></div>
      </template>
      <template v-if="!columnData.type && !columnData.options">
        <span>{{ scope.row[columnData.prop] }}</span>
        <span>{{ columnData.unit ? columnData.unit : "" }}</span>
      </template>
      <!-- 图片 -->
      <template v-if="columnData.type == 'image'">
        <z-image :value="scope.row[columnData.prop]"></z-image>
      </template>
      <!-- 开关 -->
      <template v-if="columnData.type == 'switch'">
        <z-switch
          :activeValue="columnData.activeValue ? columnData.activeValue : ''"
          :inactiveValue="
            columnData.inactiveValue ? columnData.inactiveValue : ''
          "
          :value.sync="scope.row[columnData.prop]"
          @change="change(columnData, scope.row)"
        ></z-switch>
      </template>
    </template>
  </el-table-column>
</template>
<script>
import ZImage from "../Form/Item/z-image";
import ZSwitch from "../Form/Item/z-switch";
import Inject from "../mixin/inject";
export default {
  mixins: [Inject],
  props: {
    columnData: Object,
    tableHideField: Array,
  },
  data() {
    return {
      isShow: true,
    };
  },
  computed: {
    multiselectData() {
      return (row) => {
        if (row[this.columnData.prop]) {
          let data = [];
          row[this.columnData.prop].forEach((item, index) => {
            let arr = this.columnData.options.find(
              (opItem) => opItem.value == item
            );
            if (arr) data.push(arr.label);
          });
          return data.join("，");
        }
      };
    },
  },
  components: {
    ZImage,
    ZSwitch,
  },
  created() {
    if (
      this.tableHideField &&
      this.tableHideField.indexOf(this.columnData.prop) != -1
    )
      this.isShow = false;
  },
  methods: {
    change(item, data) {
      if (
        item.changeFunction &&
        this.$CD[item.changeFunction].constructor == Function
      ) {
        this.$CD[item.changeFunction](data);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.block {
  display: inline-block;
}
</style>
